<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>什么值得买列表页</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="page">
        <header>
            <div id="title">排行榜</div>
            <div class="list">
                <div id="div1">
                    <img src="imgs/icon_article.webp" alt="">
                    <span>好文精选</span>
                </div>
                <div id="div2">
                    <img src="imgs/icon_hot.webp" alt="">
                    <span>热门资讯</span>
                </div>
            </div>
            <div id="div3">
                <button>文章</button>
            </div>
        </header>
        <section>
            <article>
                <div class="block">
                    <img src="imgs/rank-top1.png" class="mark"></img>
                    <img src="imgs/banner-1.jpg" class="photo" alt="图片失效">
                </div>
                <div class="info">在中国，这种实木被低估了！橡木榉木黑胡桃樱桃木优缺点解读！
                    6种仿品真假辨别！10款实木家具分析！
                </div>
                <div id="corner">
                    <i id="icon1"></i>
                    <span>95</span>
                    <i id="icon2"></i>
                    <span>110</span>
                </div>
            </article>
            <article>
                <div class="block">
                    <img src="imgs/rank-top2.png" class="mark"></img>
                    <img src="imgs/banner-2.jpg" class="photo" alt="图片失效">
                </div>
                <span class="info">时隔3年！微信Call kit回来了，网友：真香啊！
                </span>
                <div id="corner">
                    <i id="icon1"></i>
                    <span>297</span>
                    <i id="icon2"></i>
                    <span>132</span>
                </div>
            </article>
            <article>
                <div class="block">
                    <img src="imgs/rank-top3.png" class="mark"></img>
                    <img src="imgs/banner-3.jpg" class="photo" alt="图片失效">
                </div>
                <span class="info">618你还在犹豫？东芝厨房电器，一劳永逸的好选择！
                </span>
                <div id="corner">
                    <i id="icon1"></i>
                    <span>52</span>
                    <i id="icon2"></i>
                    <span>56</span>
                </div>
            </article>
            <article>
                <div class="block">
                    <img src="imgs/rank-top4.png" class="mark"></img>
                    <img src="imgs/banner-4.jpg" class="photo" alt="图片失效">
                </div>
                <span class="info">618必入的4款多功能家电推荐，从此不再担心房子小！
                </span>
                <div id="corner">
                    <i id="icon1"></i>
                    <span>150</span>
                    <i id="icon2"></i>
                    <span>95</span>
                </div>
            </article>
            <article>
                <div class="block">
                    <img src="imgs/rank-top5.png" class="mark"></img>
                    <img src="imgs/banner-5.jpg" class="photo" alt="图片失效">
                </div>
                <span class="info">618想买洗地机？三款热门洗地机横评，看完再决定
                </span>
                <div id="corner">
                    <i id="icon1"></i>
                    <span>79</span>
                    <i id="icon2"></i>
                    <span>95</span>
                </div>
            </article>
        </section>
    </div>
</body>

</html>